<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>第五青菜笔记</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
    <script src="./js/axios.js"></script>
</head>
<body>
    <header class="header">
        <div class="container">
            <a href="/" class="title">青菜笔记 | 技术笔记</a>
            <ul class="menu">
                <li><a href="/">首页</a></li>
                <li><a href="/sitemap.html">地图</a></li>
                <li><a href="/about.html">关于</a></li>
                <li><a href="/guestbook.html">留言</a></li>
            </ul>
            <div class="search_bar">
                <input type="text" placeholder="输入关键词查找">
                <button>搜索</button>
            </div>
        </div>
    </header>
    <div class="content">
        <div class="content_left">
            <div class="every_day" id="every_day">
                <span>偶有所感</span>
                <p v-html="getContent"></p>
            </div>
            <div class="article_list" id="article_list">
                <div class="article" v-for="article in articleList">
                    <a v-bind:href="article.link" class="article_title">{{article.title}}</a>
                    <p class="article_content">{{article.content}}</p>
                    <div class="article_foot">发布于{{article.date}} |  浏览({{article.views}}) | Tags：{{article.tags}}</div>
                </div>
                <div class="page_tool">
                    <ul>
                        <li v-for="pageNum in pageNumList" v-on:click="jumpTo(pageNum.page)" v-bind:class="{now_page:(pageNum.text == page)}">{{pageNum.text}}</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="content_right">
            <div class="right_moodule" id="random_tags">
                <div>随机标签云</div>
                <a v-for="tag in tags" v-bind:style="{color:randomColor(), fontSize:randomSize()}" v-bind:href="tag.link">{{tag.text}}</a>
            </div>
            <div class="right_moodule" id="new_hot">
                <div>最近热门</div>
                <ul>
                    <li v-for="temp in titleList">
                        <a v-bind:href="temp.link">{{temp.title}}</a>
                    </li>
                </ul>
            </div>
            <div class="right_moodule" id="new_comments">
                <div>最新评论</div>
                <ul>
                    <li v-for="comment in commentList">
                        <div>
                            <span>{{comment.name}}</span>
                            <span class="pull_right">{{comment.date}}</span>
                        </div>
                        <p>{{comment.comment}}</p>
                    </li>
                </ul>
            </div>
            <div class="right_moodule">
                <div>友情链接</div>
                <span><a href="/">还没有呢</a></span><span><a href="/">还没有呢</a></span>
                <span><a href="/">还没有呢</a></span><span><a href="/">还没有呢</a></span>
                <span><a href="/">还没有呢</a></span><span><a href="/">还没有呢</a></span>
                <span><a href="/">还没有呢</a></span><span><a href="/">还没有呢</a></span>
                <span><a href="/">还没有呢</a></span><span><a href="/">还没有呢</a></span>
            </div>
        </div>
    </div>
    <footer class="footer">
        <ul>
            <li>js</li>
            <li>CSS</li>
            <li>html</li>
            <li>node.js</li>
            <li>express</li>
        </ul>
        <p>陇ICP备19002016号</p>
    </footer>
    <script src="./js/index.js"></script>
    <script src="./js/base.js"></script>
</body>
</html>